<template>
    <div>
        <div class="vs-table-box">
            <el-form v-loading="loading" ref="ruleForm" label-position="right" class="orm-info" label-width="140px" :model="ruleForm" :rules="rules">
                <div style="display: flex; flex-wrap: wrap">
                    <el-form-item label="领用单号：">
                        <el-input v-model="ruleForm.title" style="width: 160px" placeholder="系统自动生成" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="商品类型：" prop="type">
                        <el-select style="width: 140px" @change="proChange" clearable v-model="ruleForm.type" placeholder="请选择">
                            <el-option label="毛坯" value="1"> </el-option>
                            <el-option label="定制成品" value="2"> </el-option>
                            <el-option label="标准成品" value="6"> </el-option>
                            <!-- <el-option label="积分商品" value="3"> </el-option> -->
                            <el-option label="洗护用品" value="4"> </el-option>
                            <el-option label="其他" value="5"> </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="单据备注：">
                        <el-input v-model="ruleForm.remark" placeholder="请输入单据备注" style="width: 500px" type="textarea"></el-input>
                    </el-form-item>
                </div>
                <el-form-item>
                    <el-button type="primary" @click="chooseGoods">请选择商品</el-button>
                </el-form-item>
                <el-form-item>
                    <el-table :key="1" :data="ruleForm.inventory_info" border style="width: 100%" v-if="ruleForm.type == 1 || ruleForm.type == 2 || ruleForm.type == 6" show-summary :summary-method="getSummaries">
                        <el-table-column prop="id" label="序号" align="center" width="100"> </el-table-column>
                        <el-table-column prop="number" label="商品编码" align="center"> </el-table-column>
                        <el-table-column prop="title" label="商品系列" align="center"> </el-table-column>
                        <el-table-column prop="roughcast" label="毛坯种类" align="center"> </el-table-column>
                        <template v-if="ruleForm.type == 6">
                            <el-table-column prop="item" label="款号" align="center" :key="3"> </el-table-column>
                        </template>
                        <template v-if="ruleForm.type == 1 || ruleForm.type == 2">
                            <el-table-column prop="needle" label="递针类型" align="center"> </el-table-column>
                            <el-table-column prop="sex" label="性别" align="center"> </el-table-column>
                            <el-table-column prop="length" label="长度" align="center"> </el-table-column>
                        </template>
                        <el-table-column prop="size" label="尺寸" align="center"> </el-table-column>
                        <el-table-column prop="colour" label="颜色" align="center"> </el-table-column>

                        <el-table-column prop="market_price"  v-if="utils.getIsShopowner()" key="12" label="采购价" align="center"> </el-table-column>
                        <el-table-column prop="sale_price" label="零售价" align="center"> </el-table-column>
                        <el-table-column label="领用数量" align="center" prop="count">
                            <template slot-scope="scope">
                                <el-input v-model="scope.row.count" placeholder="" @input="inputChange(scope.row)"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column prop="market_priceTotal"  v-if="utils.getIsShopowner()" key="12" label="采购价总额" align="center"> </el-table-column>
                        <el-table-column prop="sale_priceTotal" label="零售价总额" align="center"> </el-table-column>
                        <el-table-column fixed="right" width="160" label="操作" align="center">
                            <template slot-scope="scope">
                                <span @click="setRow(1, scope.row, scope.$index)" class="tab-table-text">删除</span>
                                <!-- <span @click="setRow(2,scope.row,scope.$index)" class="tab-table-text">添加</span> -->
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-table :key="2" :data="ruleForm.inventory_info" border style="width: 100%" v-else show-summary :summary-method="getSummaries">
                        <el-table-column prop="id" label="序号" align="center" width="100"> </el-table-column>
                        <el-table-column prop="number" label="商品编码" align="center"> </el-table-column>
                        <el-table-column prop="title" label="商品系列" align="center"> </el-table-column>
                        <el-table-column prop="sku_text" label="规格" align="center"> </el-table-column>
                        <el-table-column prop="unit" label="单位" align="center"> </el-table-column>
                        <el-table-column prop="market_price"  v-if="utils.getIsShopowner()" key="12" label="采购价" align="center"> </el-table-column>
                        <el-table-column prop="sale_price" label="零售价" align="center"> </el-table-column>
                        <el-table-column label="领用数量" align="center" prop="count">
                            <template slot-scope="scope">
                                <el-input v-model="scope.row.count" placeholder="" @input="inputChange(scope.row)"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column prop="market_priceTotal"  v-if="utils.getIsShopowner()" key="12" label="采购价总额" align="center"> </el-table-column>
                        <el-table-column prop="sale_priceTotal" label="零售价总额" align="center"> </el-table-column>
                        <el-table-column fixed="right" width="160" label="操作" align="center">
                            <template slot-scope="scope">
                                <span @click="setRow(1, scope.row, scope.$index)" class="tab-table-text">删除</span>
                                <!-- <span @click="setRow(2,scope.row,scope.$index)" class="tab-table-text">添加</span> -->
                            </template>
                        </el-table-column>
                    </el-table>
                </el-form-item>
                <!-- <el-form-item>
                    <el-descriptions border :column="4">
                        <el-descriptions-item label="制单人员">kooriookami</el-descriptions-item>
                        <el-descriptions-item label="制单日期">18100000000</el-descriptions-item>
                        <el-descriptions-item label="审核人员">苏州市</el-descriptions-item>
                        <el-descriptions-item label="审核日期">江苏省苏州市吴中区吴中大道 1188 号</el-descriptions-item>
                    </el-descriptions>
                </el-form-item> -->
            </el-form>
            <div class="vs-bottom-btns">
                <el-button @click="utils.backPage()">返回</el-button>
                <el-button v-if="type != 1" @click="subitm" type="primary">提交</el-button>
            </div>
        </div>

        <choice-goods :isStock="true" :warehouse_id="1 + ''" v-if="dialogTableVisible" v-model="dialogTableVisible" :type="ruleForm.type" @change="changeGoods"></choice-goods>
    </div>
</template>

<script>
    import ChoiceGoods from '@/components/ChoiceGoods.vue';
    export default {
        components: { ChoiceGoods },
        data() {
            return {
                loading: false,
                ruleForm: {
                    title: '',
                    type: '',
                    inventory_info: [],
                    remark: '',
                },
                rules: {
                    title: { required: true, message: '请输入盘点名称', trigger: 'change' },
                    type: { required: true, message: '请选择商品类型', trigger: 'change' },
                },
                dialogTableVisible: false,
                tableData: [],
            };
        },
        created() {
            let { id, type } = this.$route.query;
            if (id) {
                this.getRoom(id);
            }
            if (type) {
                this.type = type;
                this.$route.meta.title = this.utils.typeTitle(type) + '领用单';
            }
        },
        methods: {
            getSummaries(param) {
                const { columns, data } = param;
                const sums = [];
                columns.forEach((column, index) => {
                    if (index == 0) {
                        sums[index] = '合计';
                        return;
                    }
                    const values = data.map((item) => Number(item[column.property]));
                    if (column.property == 'market_priceTotal' || column.property == 'sale_priceTotal') {
                        sums[index] = values.reduce((prev, curr) => {
                            const value = Number(curr);
                            if (!isNaN(value)) {
                                return prev + curr;
                            } else {
                                return prev;
                            }
                        }, 0);
                        sums[index] = sums[index].toFixed(2);
                    } else if (column.property == 'count') {
                        sums[index] = values.reduce((prev, curr) => {
                            const value = Number(curr);
                            if (!isNaN(value)) {
                                return prev + curr;
                            } else {
                                return prev;
                            }
                        }, 0);
                    } else {
                        sums[index] = '';
                    }
                });
                return sums;
            },
            inputChange(row) {
                row.market_priceTotal = row.market_price * row.count;
                row.sale_priceTotal = row.sale_price * row.count;
            },
            setRow(type, row, index) {
                if (type == 1) {
                    // 删除
                    console.log(index);
                    this.ruleForm.inventory_info.splice(index, 1);
                } else {
                    //填加
                    let obj = Object.assign({}, row);
                    obj.num = '';
                    this.ruleForm.inventory_info.push(obj);
                }
            },
            // 类型切换
            proChange() {
                this.ruleForm.inventory_info = [];
            },
            blurInput(e, index) {
                let row = this.ruleForm.inventory_info[index];
                if (row.count !== '') {
                    row.count = parseInt(row.count);
                }
            },
            async chooseGoods() {
                if (!this.ruleForm.type) {
                    return this.$message.warning('请选择商品类型');
                }
                this.dialogTableVisible = true;
            },
            async changeGoods(val) {
                let list = [];
                for (let v of val) {
                    if (!this.ruleForm.inventory_info.find((v2) => v2.goods_id == v.id)) {
                        v.goods_id = v.id;
                        v.count = '';
                        v.remark = '';
                        v.price = '';
                        list.push(v);
                    }
                }
                this.ruleForm.inventory_info.push(...JSON.parse(JSON.stringify(list)));
                console.log(this.ruleForm.inventory_info);
                for (let o of this.ruleForm.inventory_info) {
                    this.$set(o, 'market_priceTotal', o.market_price * o.count);
                    this.$set(o, 'sale_priceTotal', o.sale_price * o.count);
                }
            },
            async subitm() {
                this.$refs['ruleForm'].validate(async (valid) => {
                    if (!valid) return;
                    if (!this.ruleForm.inventory_info.length) {
                        return this.$message.warning('请选择产品');
                    }
                    let inventory_info = [];
                    let flag = false;
                    let numFlag = false;
                    for (let i in this.ruleForm.inventory_info) {
                        if (!this.ruleForm.inventory_info[i].count) {
                            numFlag = true;
                            break;
                        }
                        // if (!this.ruleForm.inventory_info[i].stock_count) {
                        //     flag = true
                        //     break
                        // }
                        inventory_info.push({
                            goods_id: this.ruleForm.inventory_info[i].id,
                            count: this.ruleForm.inventory_info[i].count,
                            retail_price: this.ruleForm.inventory_info[i].sale_price,
                            price: this.ruleForm.inventory_info[i].market_price,
                        });
                    }
                    // if (!flag) {
                    //     return this.$message.warning('有商品无库存')
                    // }
                    if (numFlag) {
                        return this.$message.warning('请输入领用数量');
                    }
                    let type = this.ruleForm.type;
                    if (type == 3) {
                        type = 4;
                    }
                    let parms = {
                        info: JSON.stringify(inventory_info),
                        goods_type: type,
                        remarks: this.ruleForm.remark,
                        store_id: JSON.parse(localStorage.getItem('userInfo')).store_id,
                    };
                    this.loading = true;
                    let { code } = await this.$Http.receiveTicketAdd(parms);
                    this.loading = false;
                    if (code) {
                        this.$message.success('提交成功');
                        this.utils.backPage();
                    }
                });
            },
        },
    };
</script>
<style lang="scss" scoped></style>
